iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
0
自我挑戰組

網頁學習紀錄系列 第 29

鐵人賽 Day29 收合式側邊選單練習

  • 分享至 

  • xImage
  •  

這次的練習參考 Amos 老師的金魚都能懂的網頁切版 : 收合式側邊選單 NO014 ,側邊選單收合很常被使用,各種網站都會看到這樣的寫法,之前也因為參加 F2E 一個側邊選單搞了一個禮拜,那時剛學網頁大概兩三個月,寫得真的很痛苦!(後來 F2E 就直接陣亡了 )

感謝這次 Amos 老師的影片教學,還另外給很多新知識跟技術,真是太棒了~~!!

這次我要寫的是這樣的畫面,如下圖
https://ithelp.ithome.com.tw/upload/images/20191002/20119300gP27dmLnme.png
在側邊欄位有多一個小標籤,可以做收合,收起來會變下圖
https://ithelp.ithome.com.tw/upload/images/20191002/20119300KOqLTFdm0L.png

這次 HTML 多了兩行,使用 checkbox 的屬性

  <input type="checkbox" name="" id="sideMenu--active">
    <!-- 使用 checkbox 來做開關 -->
    <div class="sideMenu">
        <form>
            <input type="search" placeholder="請輸入搜尋名稱">
            <button><i class="fas fa-search"></i></button>
        </form>
        <nav>
            <a href="#"><i class="fas fa-sitemap"></i>課程簡介</a>
            <a href="#"><i class="fas fa-chalkboard"></i></i>報名須知</a>
            <a href="#"><i class="fas fa-book-reader"></i>師資介紹</a>
            <a href="#"><i class="fas fa-user-graduate"></i>學員分享</a>
            <a href="#"><i class="fas fa-trophy"></i>比賽資訊</a>
        </nav>
        <label for="sideMenu--active">
            <i class="fas fa-angle-right"></i>
        </label>
        <!-- label 寫在 nav 下方是為了比較好看到 -->
    </div>

現在才知道可以用 checkbox 來當作開關使用,真是太遜了...

這次 SCSS 內容比較多,

 .sideMenu {
    width: 300px;
    height: 100%;
    background-color: #ff7575;
    border-right: 3px solid #d1d1d1;
    display: flex;
    //讓 sideMenu 裡面的元素變成橫排
    flex-direction: column;
    //讓 flex 的方向變成直排
    padding: 50px 0;
    //因為有 boxsizing 的關係,所以不會有 Y 軸 bar
    box-shadow: 5px 0 5px hsla(240, 40%, 15%, .6);
    //H 為 hue(色相)、S 為 saturation(飽合度)、L 為 lightness(亮度),a透明度
    position: relative;
    // label 定位在這個上 (本次新增)
    transform: translateX(-100%);
    // 將 sideMenu 左橫移 100%,使他到螢幕外 (本次新增)
    transition: 0.3s;
    // 最後加上側邊選單收合的時間差 (本次新增)

    form {
       ...
    }
    
    label{
        position: absolute;
        width: 20px;
        height: 80px;
        background-color: #d1d1d1;
        color: #686666;
        // 絕對定位在 sideMenu 上
        right: -20px;
        top: 0;
        bottom: 0;
        margin: auto;
        line-height: 80px;
        text-align: center;
        border-radius: 0 5px 5px 0;
        // 標籤加圓角
        box-shadow: 5px 0 5px hsla(240, 40%, 15%, .6);
    }

先新增 lebel 要有的樣式

#sideMenu--active:checked+.sideMenu {
    transform: translateX(0);

    // 當我點擊 sideMenu 時,checkbox 會啟動 id,讓側邊選單跑出來
    label .fas {
        transform: scaleX(-1);
        // 使 label 裡的圖案橫向反轉
    }

}

#sideMenu--active {
    position: absolute;
    opacity: 0;
    // 設定 checkbox 絕對定位,透明度是 0,就會隱藏 
    z-index: -1;
    // 為了保險不要讓該功能還選得到,可將其排序往後跳
}

用到 id 的屬性寫法,這個部分是新學到的

側邊選單可以收合的方式就完成了!
看到這篇覺得非常受用,立馬紀錄與練習下來,
另外 fontawesome 是使用新版的,所以 fa 會改成 fas,這邊找 bug 竟然花了比較多時間...

codepen https://codepen.io/hnzxewqw/pen/GRKVmKq


上一篇
鐵人賽 Day28 側邊選單切版練習
下一篇
鐵人賽 Day30 終於寫到了尾聲,然後呢?
系列文
網頁學習紀錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言